<template>
  <a-tree-select v-model="value" show-search :style="'width:' + width + 'px'"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请选择故障代码" :allow-clear="allowClear"
    tree-default-expand-all @change="change" :defaultValue="defaultValue" :disabled="disabled">
    <a-tree-select-node v-for="item in treeList" :key="item.key" :value="JSON.stringify(item)" :title="item.slotTitle"
      :disabled="true">
      <a-tree-select-node v-for="item2 in item.children" :key="item2.key" :disabled="true"
        :value="JSON.stringify(item2)" :title="item2.slotTitle">
        <a-tree-select-node v-for="item3 in item2.children" :key="item3.key" :value="JSON.stringify(item3)"
          :title="item3.slotTitle">
          <a-tree-select-node v-for="item4 in item3.children" :key="item4.key" :value="JSON.stringify(item4)"
            :title="item4.slotTitle">
          </a-tree-select-node>
        </a-tree-select-node>
      </a-tree-select-node>
    </a-tree-select-node>
  </a-tree-select>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      treeExpandedKeys: [],
      value: undefined,
      treeList: [],
    }
  },
  props: {
    width: {
      type: Number,
      default: 100,
    },
    selectKey: {
      type: [Number, String],
      default: '',
    },
    defaultValue: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    allowClear: {
      type: Boolean,
      default: true,
    },
  },
  mounted() {
    this.queryTreeList()
  },
  methods: {
    queryTreeList() {
      getAction('xxxxxxx', {}).then((res) => {
        this.list = res.result
        this.treeList = res.result.treeList
      })
    },
    change(value, label, extra) {
      // console.log(value,label, extra)
      let parmas = {
        value: JSON.parse(value),
        selectKey: this.selectKey,
      }
      this.$emit('change', parmas)
    },
  },
}
</script>
